<template>
  <div class="exchange-rate">
    <el-table
      v-loading="listLoading"
      :data="list"
      :element-loading-text="elementLoadingText"
    >
      <el-table-column
        align="center"
        prop="name"
        label="币种"
        min-width="80"
      ></el-table-column>
      <el-table-column
        align="center"
        label="汇率"
        min-width="80"
      >
        <template #default="{ row }">
          <el-input v-model="row.rate" placeholder="未设置"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="intro"
        label="说明"
        min-width="280"
      ></el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      listLoading: false,
      list: [
        {
          name: 'USD',
          rate: '1.0000',
          intro: '1美元相对于基币的汇率'
        },
        {
          name: 'HKD',
          rate: '1.0000',
          intro: '1港元相对于基币的汇率'
        },
        {
          name: 'EUR',
          rate: '1.0000',
          intro: '1欧元相对于基币的汇率'
        },
        {
          name: 'JPY',
          rate: '1.0000',
          intro: '1日元相对于基币的汇率'
        },
        {
          name: 'GBP',
          rate: '1.0000',
          intro: '1英镑相对于基币的汇率'
        },
        {
          name: 'CNH',
          rate: '1.0000',
          intro: '1人民币相对于基币的汇率'
        },  
      ],
      elementLoadingText: '正在加载...',
    }
  }
}
</script>
<style lang="scss" scoped>
.exchange-rate {
  padding: 20px;
  ::v-deep {
    .el-input__inner {
      text-align: center;
    }
  }
}
</style>